/**
 * @desc 省市区三级联动
 * */
 import React, { Component } from "react";
 import { Select, Space } from "antd";
 import PropTypes from "prop-types";
 import { apiGetDBAreaList } from "@/request/serviceStation";
 
 class TheArea extends Component {
   state = {
     provinceList: [],
     cityList: [],
     areaList: [],
     province: "",
     provinceName: "",
     city: "",
     cityName: "",
     area: "",
     areaName: "",
   };
 
   async componentDidMount() {
     await this.getProvince();
   }
 
   //获取省份信息
   getProvince = async () => {
     const res = await apiGetDBAreaList({ level: 1, areaParentId: 1 });
     if (res.code === 0 && res.data.length > 0) {
       const provinceList = res.data.map((v) => {
         return {
           label: v.areaName,
           value: v.areaId,
         };
       });
    //    provinceList.unshift({
    //      label: "全部",
    //      value: 0,
    //    });
       this.setState(
         {
           provinceList,
           province: res.data[0].areaId,
           provinceName: res.data[0].areaName,
         },
         async () => {
           this.props.setAreaData({
             province: this.state.provinceList[0].value || "",
             provinceName: "",
             city: "",
             area: "",
           });
           if (this.state.provinceList[0].value) {
             await this.getCity(this.state.provinceList[0].value);
           } else {
             this.setState({
               cityList: [],
               areaList: [],
               city: "",
               cityName: "",
               area: "",
               areaName: "",
             });
           }
         }
       );
     }
   };
   //获取市级信息
   getCity = async (areaParentId) => {
     const res = await apiGetDBAreaList({ level: 2, areaParentId });
     if (res.code === 0 && res.data.length > 0) {
       this.setState({
         cityList: res.data.map((v) => {
           return {
             label: v.areaName,
             value: v.areaId,
           };
         }),
         city: res.data[0].areaId,
         cityName: res.data[0].areaName,
       });
       this.props.setAreaData({
         province: this.state.province,
         provinceName: this.state.provinceName,
         city: res.data[0].areaId,
         cityName: res.data[0].areaName,
         area: "",
       });
       await this.getArea(~~res.data[0].areaId);
     }
   };
   //获取区级信息
   getArea = async (areaParentId) => {
     const res = await apiGetDBAreaList({ level: 3, areaParentId });
     if (res.code === 0) {
       this.setState({
         areaList: res.data.map((v) => {
           return {
             label: v.areaName,
             value: v.areaId,
           };
         }),
         area: res.data[0].areaId,
         areaName: res.data[0].areaName,
       });
       this.props.setAreaData({
         province: this.state.province,
         provinceName: this.state.provinceName,
         city: this.state.city,
         cityName: this.state.cityName,
         area: res.data[0].areaId,
         areaName: res.data[0].areaName,
       });
     }
   };
   onChange = async ({ value, label }, level) => {
     switch (~~level) {
       case 1:
         this.setState({
           province: value,
           provinceName: label === "全部" ? "" : label,
         });
         switch (value) {
           case 0:
             this.setState(
               {
                 cityList: [],
                 areaList: [],
                 city: "",
                 cityName: "",
                 area: "",
                 areaName: "",
               },
               () => {
                 const {
                   province,
                   provinceName,
                   city,
                   cityName,
                   area,
                   areaName,
                 } = this.state;
                 this.props.setAreaData({
                   province,
                   city,
                   area,
                   provinceName,
                   cityName,
                   areaName,
                 });
               }
             );
             break;
           default:
             await this.getCity(value);
             break;
         }
         break;
       case 2:
         this.setState({ city: value, cityName: label });
         await this.getArea(value);
         break;
       case 3:
         this.setState({ area: value, areaName: label }, () => {
           const { province, provinceName, city, cityName, area, areaName } =
             this.state;
           this.props.setAreaData({
             province,
             city,
             area,
             provinceName,
             cityName,
             areaName,
           });
         });
         break;
       default:
         break;
     }
     // const {province, city, area} = this.state;
     // this.props.setAreaData({
     //     province, city, area
     // });
   };
   init = async () => {
     await this.onChange({ value: 0, label: "全部" }, 1);
   };
 
   render() {
     const { provinceList, cityList, areaList, province, city, area } =
       this.state;
     return (
       <div className={"area"} style={{ flex: 1 }}>
         <Space>
           <Select
             style={{ width: 200 }}
             value={province}
             options={provinceList}
             placeholder="请选择省"
             onChange={(value, option) => this.onChange(option, 1)}
           />
           <Select
             style={{ width: 200 }}
             value={city}
             options={cityList}
             placeholder="请选择市"
             onChange={(value, option) => this.onChange(option, 2)}
           />
           <Select
             style={{ width: 200 }}
             value={area}
             options={areaList}
             placeholder="请选择区"
             onChange={(value, option) => this.onChange(option, 3)}
           />
         </Space>
       </div>
     );
   }
 }
 
 TheArea.propTypes = {
   address: PropTypes.object,
 };
 TheArea.defaultProps = {};
 
 export default TheArea;
 